:root {
  --main-color: #049ef4;
  --text-color: #bbb;
  --secondary-text-color: #666;
  --background-color: #222;
  --secondary-background-color: #2e2e2e;
  --border-style: 1px solid #444;
}

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}
.hljs {
  color: #c9d1d9;
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: #ff7b72;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: #d2a8ff;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable {
  color: #79c0ff;
}
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
  color: #a5d6ff;
}
.hljs-built_in,
.hljs-symbol {
  color: #ffa657;
}
.hljs-code,
.hljs-comment,
.hljs-formula {
  color: #8b949e;
}
.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
  color: #7ee787;
}
.hljs-subst {
  color: #c9d1d9;
}
.hljs-section {
  color: #1f6feb;
  font-weight: 700;
}
.hljs-bullet {
  color: #f2cc60;
}
.hljs-emphasis {
  color: #c9d1d9;
  font-style: italic;
}
.hljs-strong {
  color: #c9d1d9;
  font-weight: 700;
}
.hljs-addition {
  color: #aff5b4;
  background-color: #033a16;
}
.hljs-deletion {
  color: #ffdcd7;
  background-color: #67060c;
}

.hljs-ln-numbers {
  padding-right: 20px !important;
  text-align: right;
  color: var(--secondary-text-color);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.right-document {
  overflow: auto;
  height: 100%;
  .hljs {
    background: #1a1a1a;
    border-radius: 10px;
  }
}

html,
body,
.root {
  margin: 0;
  height: 100%;
  width: 100%;
  color: var(--text-color);
  background: var(--background-color);
  font-size: 18px;
  font-weight: bold;
  font-family: 'Roboto Mono', monospace;
}
.root {
  overflow: hidden;
  display: flex;
}
.root .left {
  width: 320px;
  overflow: hidden;
  border-right: var(--border-style);
  display: flex;
  flex-direction: column;
}
.root .left .logo {
  height: 50px;
  line-height: 50px;
  border-bottom: var(--border-style);
  padding: 0 10px;
  color: var(--main-color);
  font-weight: bold;
}
.root .left .logo .tab {
  color: var(--secondary-text-color);
  height: 100%;
  float: right;
}
.root .left .logo .tab > span {
  padding: 0 10px;
  display: inline-block;
  height: 100%;
  cursor: pointer;
}
.root .left .logo .tab .active {
  color: var(--text-color);
  border-bottom: 2px solid;
}
.root .right {
  flex: 1;
  overflow: hidden;
}
.code-p {
  padding: 10px;
  overflow: auto;
  line-height: 26px;
  font-size: 17px;
}
.left .menus {
  overflow-x: hidden;
  overflow-y: auto;
}
.left .menus > div {
  padding: 10px 20px;
  cursor: pointer;
}
.left .menus .active,
.left .menus > div:hover {
  color: var(--main-color);
}

iframe {
  border: none;
}

iframe .graph-background {
  height: 100px;
  width: 100%;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #444444;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(88, 88, 88);
  border-radius: 10px;
}

::-webkit-scrollbar-corner {
  color: rgb(88, 88, 88);
}
